<template>
  <div>
    <div class="zxfk_info">
        <div class="hintContract">
            <div class="inner">
                <p>
                    离合约到期还有{{29}}天，还需消费&yen;{{564.37}}，即可获得&yen;{{50}}。适用油品<span>92#</span>
                </p>
            </div>
        </div>
        <div class="nophone">
            <p><i></i>加油站内请勿下车使用手机</p>
        </div>
        <div class="nowyz selectStation">
            <p>您当前在：<span class="oilStation">{{stationName}}</span></p>
        </div>
        <div class="nowyz paymentSelYQ">
            <ul @click="show()">
                <li>
                    <p class="lf">油枪</p>
                    <input class="lf" placeholder="请选择枪号" readonly="readonly" v-model="gunNum"/>
                    <img :src="upDown" alt="" class="selYqImg">
                    <div class="clear"></div>
                </li>
            </ul>
            <div class="alert_price">
                <div>!</div>
                <p>油品金额为10-9999的数字</p>
            </div>
            <div class="alert_otherprice">
                <div>!</div>
                <p>非油金额不能大于9999</p>
            </div>
        </div>
        <p class="endqiang" v-if=endqiangShow >
            <span id="oilGunNum">{{gunNum}}</span>号枪, <span id="oilCode">{{oilNum}}</span>号 <span style="margin-left:0.2rem;">{{desc}}</span>
        </p>
        <div class="nowyz otherPrice">
            <ul>
                <li class="paymentOilPrice" :class="{disabledInput}" @click="paymentOilPrice">
                    <p class="lf">金额</p>
                    <div class="lf cmdPrice noInput">
                        <span v-text="inputOilPay" :class="{black}"></span>
                        <div class="cursorPrice blinkPrice" v-if=oilCursor></div>
                    </div>
                    <div class="clear"></div>
					<transition name="fade">
						<ul class="recommendPrice" v-if=recommendPriceShow>
							<li @click="input100">100</li>
							<li >200</li>
							<li>300</li>
							<li>400</li>
						</ul>
					</transition>
                    

                </li>
                <li class="disabledInput paymentOtherPrice">
                    <p class="lf">商品</p>
                    <div class="lf cmdPrice noInput">
                        <span>请输入商品金额(非必填)</span>
                        <div class="cursorPrice blinkPrice" v-if=goodsCursor></div>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="selYQ" @click="hide($event)" v-if=selYQshow>
            <div>
                <p>请选择油枪号<span>(可咨询加油员)</span></p>
                <div class="close"><i @click="iHide"></i></div>
                <ul>
                    <li class="oilGunLi" v-for="(item,index) in oilGuns" :key="index" @click.prevent="selectOilGun(index)">
                        <a href="#">
                            <p><span class="gunNum">{{item.gunNum}}</span>号枪</p>
                            <p><span class="oilCode">{{item.oilNum}}</span>号</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
	<div class="layer-content">
		<table class="form_edit">
			<tr>
				<td class="num">1</td>
				<td class="num">2</td>
				<td class="num">3</td>
				<td class="remove" rowspan="2"><i></i></td>
			</tr>
			<tr>
				<td class="num">4</td>
				<td class="num">5</td>
				<td class="num">6</td>
			</tr>
			<tr>
				<td class="num">7</td>
				<td class="num">8</td>
				<td class="num">9</td>
				<td class="confirm" rowspan="2">下一步</td>
			</tr>
			<tr>
				<td class="deleteAll">清空</td>
				<td class="num">0</td>
				<td class="num">.</td>
			</tr>
		</table>
	</div>
  </div>
</template>
<script>
import oilGuns from './oilGuns.json'
import up from '../assets/img/up.png'
import down from '../assets/img/down.png'
export default {
  data () {
      return {
          swipeData:{},
          stationName:"美拓加油站-中国能源",
          oilGuns:oilGuns,//油枪号[]
          selYQshow:false,
          gunNum:"",
          oilNum:"",
          desc:"",
          endqiangShow: false,
          disabledInput: true,
		  upDown:down,
		  oilCursor:false,//油价光标
		  goodsCursor:false,//油价光标
		  recommendPriceShow:false,
		  inputOilPay:"请输入加油金额(10-9999)",
		  black:false
      }
  },
  methods:{
      show:function(){
          this.selYQshow=true;
		  this.upDown=up;
      },//显示油枪号弹框
    //   hide:function($event){
    //       var whoClass=$event.target.className;
    //       if(whoClass=="selYQ"){
    //           this.selYQshow=false;
	// 		  this.upDown=down;
    //       }
    //   },//点击空白区,隐藏油枪号弹框
      iHide:function(){
          this.selYQshow=false;
		  this.upDown=down;
      },//close按钮,隐藏油枪号弹框
      selectOilGun:function(index){
          this.gunNum = this.oilGuns[index].gunNum;//油枪行:枪号
          this.oilNum = this.oilGuns[index].oilNum;//油枪行:油号
          this.desc   = this.oilGuns[index].desc;//油枪行:油品描述
          this.endqiangShow = true;//油枪行
          this.selYQshow=false;//隐藏油枪弹框
          this.disabledInput=false;//金额行取消禁用
		  this.upDown=down;//上下图标
      },//选择油枪后,隐藏油枪号弹框
	  paymentOilPrice:function(){
		  if(this.disabledInput){
			  return false;
		  }
		  console.log(123);
		  this.oilCursor=true;
		  this.recommendPriceShow=true;
	  },
	  input100:function(){
		  this.inputOilPay=100
		  this.black=true
	  }
  },
  created () {
	//   console.log(this.upDownImg)
      }
}
</script>
<style scoped>
/*在线付款*/
.zxfk_info{
	margin-bottom:5rem;
}
.zxfk_info>.hintContract{
	height:0.36rem;
	line-height:0.36rem;
	background:rgba(231,0,18,0.3);
	overflow:hidden;
	white-space: nowrap;
}
.zxfk_info>.hintContract>.inner{
	margin:0 0.3rem;
	overflow:hidden;
}
.zxfk_info>.hintContract>.inner>p{
	color:#000;
	font-size:0.24rem;
    display:inline-block;
    margin-left:6rem;
    animation:swipe 50s linear 1s infinite;
}
@keyframes swipe {
    from{
        margin-left: 7rem;
    }to{
        margin-left: -8rem;
    }
}

.zxfk_info>.nophone{
	width:100%;
	height:1rem;
}
.zxfk_info>.nophone>p{
	text-align:center;
	color:#888;
	line-height:1rem;
	height:1rem;
}
.zxfk_info>.nophone>p>i{
	display:inline-block;
	width:0.3rem;
	height:0.3rem;
	margin-right:0.2rem;
	background:url('../assets/img/help.png') no-repeat;
	background-size:contain;
	vertical-align: middle;
	margin-top:-0.04rem;
}
.zxfk_info>.nowyz{
	width:100%;
	height:0.88rem;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	background:#fff;
	box-sizing:border-box;
}
.zxfk_info>.nowyz>p{
	color:#000;
	font-size:0.34rem;
	height:0.88rem;
	line-height:0.88rem;
	margin-left:0.3rem;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.zxfk_info>.paymentSelYQ{
	margin-top:0.3rem;
	height:auto;
}
.zxfk_info>.paymentSelYQ>ul{
	padding-left:0.3rem;
}

.zxfk_info>.paymentSelYQ>ul>li{
	position:relative;
	height:0.88rem;
	line-height:0.88rem;
}
.zxfk_info>.paymentSelYQ>ul>li>p{
	color:#000;
	font-size:0.34rem;
	height:0.88rem;
	line-height:0.88rem;
	width:1.72rem;
}
.zxfk_info>.paymentSelYQ>ul>li>input{
	padding:0;
	height:0.8rem;
	line-height:0.8rem;
	font-size:0.34rem;
	color:#000;
	margin-top:0.04rem;
}
.zxfk_info>.paymentSelYQ>ul>li>.selYqImg{
	position:absolute;
	right:0.3rem;
	width:0.26rem;
	height:0.16rem;
	top:0.36rem;
}

.zxfk_info>.otherPrice{
	padding-left:0.3rem;
	margin-top:0.3rem;
	height:auto;
}
.zxfk_info>.otherPrice>ul>li{
	border-bottom:1px solid #ddd;
}
.zxfk_info>.otherPrice>ul>li:last-child{
	border-bottom:0;
}
.zxfk_info>.otherPrice>ul>li>p{
	color:#000;
	font-size:0.34rem;
	height:0.88rem;
	line-height:0.88rem;
	width:1.72rem;
}
.zxfk_info>.otherPrice>ul>li.disabledInput>p{
	color:#bbb;
}

.zxfk_info>.otherPrice>ul>li>.cmdPrice{
	height:0.88rem;
	line-height:0.88rem;
}
.zxfk_info>.otherPrice>ul>li>.cmdPrice>span{
	font-size:0.36rem;
	color:#000;
}
.zxfk_info>.otherPrice>ul>li>.cmdPrice.noInput>span{
	color:#888;
	font-size:0.34rem;
}

.zxfk_info>.otherPrice>ul>li>.recommendPrice{
	overflow:hidden;
	/* display:none; */
}
.zxfk_info>.otherPrice>ul>li>.recommendPrice>li{
	float:left;
	width:1.58rem;
	height:0.78rem;
	border-radius:0.04rem;
	background:#f2f2f2;
	text-align:center;
	line-height:0.78rem;
	margin:0.1rem 0.2rem 0.3rem 0;
	border:1px solid #ddd;
	box-sizing:border-box;
	font-size:0.34rem;
	color:#000;
}
.zxfk_info>.otherPrice>ul>li>.recommendPrice>li:last-child{
	margin-right:0;
}

.zxfk_info>.selYQ{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.3);
	/* display:none; */
	z-index:999;
}

.zxfk_info>.selYQ>div{
	position:absolute;
	bottom:0;
	background:#fff;
	width:100%;
	height: 6.7rem;
	overflow: scroll;
	padding-bottom: 0.3rem;
	box-sizing:border-box;
}
@media screen and (min-width: 750px) {
	.zxfk_info>.selYQ>div{
		width:7.5rem;
		left:50%;
		transform:translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	}
}
::-webkit-input-placeholder { /* WebKit browsers */
	color: #888;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #888;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #888;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #888;
}
.zxfk_info>.selYQ>div>p{
	font-size:0.34rem;
	color:#000;
	height:0.34rem;
	line-height:0.34rem;
	padding-top:0.44rem;
	text-align:center;
}
.zxfk_info>.selYQ>div>p>span{
	font-size:0.28rem;
	color:#888;
	margin-top:-0.1rem;
	vertical-align:middle;
	display:inline-block;
}
.zxfk_info>.selYQ>div>.close{
	position:absolute;
	top:0.4rem;
	right:0.4rem;
	cursor:pointer;
}
.zxfk_info>.selYQ>div>.close>i{
	display:block;
	width:0.4rem;
	height:0.4rem;
	background:url('../assets/img/sprite.png') no-repeat -5.5rem -0.46rem;
	background-size:5.96rem;
}
.zxfk_info>.selYQ>div>ul{
	margin-top:0.42rem;
	padding:0 0.2rem;
	overflow:hidden;
}
.zxfk_info>.selYQ>div>ul>li{
	float:left;
	margin-right:0.1rem;
	margin-bottom:0.1rem;
}
.zxfk_info>.selYQ>div>ul>li:nth-child(4n){
	margin-right:0;
}
.zxfk_info>.selYQ>div>ul>li>a{
	float:left;
	width:1.7rem;
	height:1.2rem;
	box-sizing:border-box;
	background:#f2f2f2;
	border:0.01rem solid #e8e8e8;
	border-radius:0.04rem;
}
.zxfk_info>.selYQ>div>ul>li>a>p{
	font-size:0.3rem;
	line-height:0.45rem;
	color:#000;
	text-align:center;
}
.zxfk_info>.selYQ>div>ul>li>a>p:first-child{
	margin-top:0.15rem;
}
.zxfk_info>.endqiang{
	padding-left:0.3rem;
	text-align:left;
	font-size:0.3rem;
	height:0.3rem;
	line-height:0.3rem;
	color:#000;
	margin:0.2rem 0;
}
.zxfk_info>.endqiang>#oilGunNum,.zxfk_info>.endqiang>#oilCode{
	color:#e70012;
}

.zxfk_info>.paymentSelYQ>.alert_price{
	width:3.2rem;
	height:1.8rem;
	border-radius:0.12rem;
	background:rgba(0,0,0,0.7);
	box-sizing:border-box;
	padding-top:0.3rem;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	display:none;
	z-index:99;
}
.zxfk_info>.paymentSelYQ>.alert_price>div{
	box-sizing:border-box;
	width:0.72rem;
	height:0.72rem;
	line-height:0.72rem;
	text-align:center;
	border:1px solid #fff;
	border-radius:50%;
	color:#fff;
	font-size:0.36rem;
	margin:0 auto;
}
.zxfk_info>.paymentSelYQ>.alert_price>p{
	margin-top:0.2rem;
	font-size:0.26rem;
	color:#fff;
	text-align:center;
}
.zxfk_info>.paymentSelYQ>.alert_otherprice{
	width:3.2rem;
	height:1.8rem;
	border-radius:0.12rem;
	background:rgba(0,0,0,0.7);
	box-sizing:border-box;
	padding-top:0.3rem;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	display:none;
	z-index:99;
}
.zxfk_info>.paymentSelYQ>.alert_otherprice>div{
	box-sizing:border-box;
	width:0.72rem;
	height:0.72rem;
	line-height:0.72rem;
	text-align:center;
	border:1px solid #fff;
	border-radius:50%;
	color:#fff;
	font-size:0.36rem;
	margin:0 auto;
}
.zxfk_info>.paymentSelYQ>.alert_otherprice>p{
	margin-top:0.2rem;
	font-size:0.26rem;
	color:#fff;
	text-align:center;
}
/* 输入光标 */
.cmdPrice{
	position:relative;
}
.cmdPrice .cursorPrice.blinkPrice {
	-webkit-animation: 1s blink infinite;
	animation: 1s blink infinite;
	border: none;
	margin: 0;
	height:0.5rem;
	width:0.04rem;
	position:absolute;
	top:0.19rem;
	border-radius:0.02rem;
}
/* 虚拟键盘 */
.layer-content {
	position: fixed;
	left: 50%;
	/* bottom: -4.82rem; */
	bottom: 0rem;
	width: 100%;
	height: 4.82rem;
	z-index: 12;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	background: #fff;
}
@media (min-width:750px){
	.layer-content{
		width: 750px;
	}
}
.form_edit {
	width: 100%;
	border-collapse: collapse;
}
.form_edit td {
	width: 25%;
	height: 1.2rem;
	text-align: center;
	color: #000;
	line-height:1.2rem;
	font-size: 0.6rem;
	border:1px solid #ddd;
	box-sizing: border-box;
}
.remove,.confirm{
	height:2.4rem;
	line-height:2.4rem;
}

.remove>i{
	display:inline-block;
	width:0.552rem;
	height:0.384rem;
	background:url('../assets/img/sprite.png') no-repeat -0.336rem -2.256rem;
	background-size:7.152rem;
	vertical-align: middle;
}

.form_edit td.confirm{
	background:#f2f2f2;
	color:#888;
	font-weight:normal;
	font-size:0.4rem;
}
.form_edit td.confirm.btnAvail{
	background:#ffd400;
	color:#fff;
}
.form_edit td.deleteAll{
	font-size:0.34rem;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 2.5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
</style>
